<template>
    <div class="yContainerColumnCenter yMatch" style="background: #666666">
        <el-card class="yContainerColumnCenter" style="background: white;padding: 20px;border-radius: 10px;width: 500px;margin-top: -100px">
            <span style="font-size: 25px;font-weight: bold">{{ title }}</span>
            <el-input size="large" prefix-icon="User" :placeholder="placeholder_username" v-model="input_username" @blur="click_refreshCode" clearable/>
            <el-input size="large" prefix-icon="Lock" :placeholder="placeholder_password" v-model="input_password" clearable show-password/>
            <el-input size="large" prefix-icon="Postcard" :placeholder="placeholder_code" v-model="input_code" clearable>
                <template #append>
                    <el-image class="yContainerRowCenter" :src="url_code" fit="contain" style="width:90px;" @click="click_refreshCode">
                        <template #placeholder>
                            <el-icon class="yContainerRowCenter yMatch">
                                <loading/>
                            </el-icon>
                        </template>
                        <template #error>
                            <el-icon class="yContainerRowCenter yMatch" @click="click_refreshCode">
                                <warning/>
                            </el-icon>
                        </template>
                    </el-image>
                </template>
            </el-input>
            <div class="yContainerRowCenter" style="margin-top: 20px">
                <el-button class="yWeight" type="primary" size="large" @click="click_login" :loading="isLoginLoad">
                    登录
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'

let $this, yFree, Global, IJkid, IFinal, AppUtils;

export default {
    computed: mapState(['store_title']),
    data() {
        return {
            title: '', url_code: '', isLoginLoad: false,
            input_username: '', input_password: '', input_code: '',
            placeholder_username: '请输入用户名', placeholder_password: '请输入密码', placeholder_code: '请输入验证码',
        }
    },
    mounted() {
        document.addEventListener("keyup", this.enterKey);
    },
    beforeCreate() {
        $this = this, yFree = $this.yFree, Global = $this.Global, IJkid = $this.IJkid, IFinal = $this.IFinal, AppUtils = $this.AppUtils;
    },
    created() {
        $this.initTitle(yFree.webName);
        yFree.ySetTitle($this.store_title);
        $this.title = IFinal.toastTitle;
        AppUtils.deleteUserModel();
        yFree.yDelete(IFinal.SaveKey.menuModels_history);
        $this.click_refreshCode();
    },
    methods: {
        ...mapMutations(["initTitle"]),
        enterKey(event) {
            const code = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);
            if (code === 13) $this.click_login();
        },
        click_refreshCode() {
            $this.url_code = yFree.yIsEmpty($this.input_username) ? '' : `${yFree.IP}/code?loginname=${$this.input_username}&v=${new Date().getTime()}`;
        },
        click_login() {
            let username = $this.input_username;
            if (yFree.yIsEmpty(username)) {
                yFree.yToast($this.placeholder_username, "error");
                return;
            }
            let password = $this.input_password;
            if (yFree.yIsEmpty(password)) {
                yFree.yToast($this.placeholder_password, "error");
                return;
            }
            let code = $this.input_code;
            if (yFree.yIsEmpty(code)) {
                yFree.yToast($this.placeholder_code, "error");
                return;
            }
            $this.isLoginLoad = true;
            yFree.yPost($this, IJkid.login, {
                "loginname": username,
                "password": password,
                "code": code,
            }, (results) => {
                $this.isLoginLoad = false;
                document.removeEventListener("keyup", this.enterKey);
                yFree.yToast(`登录成功，${IFinal.toastTitle}`);
                AppUtils.saveUserModel(results[0]);
                yFree.yIntent(IFinal.Page.home, null, 0);
            }, (code, message) => {
                $this.isLoginLoad = false;
                $this.click_refreshCode();
            }, false);
        },
    },
};
</script>

<style scoped>
.el-input {
    margin-top: 20px;
}
</style>
